<template>
  <div>
    <el-form :inline="true" :model="selectSysDictData" class="demo-form-inline">
      <el-form-item label="字典类型">
        <el-select v-model="selectSysDictData.dictType" placeholder="请选择字典标签">
          <el-option
              v-for="item in sysDictTypeList"
              :key="item.dictType"
              :label="item.dictType"
              :value="item.dictType">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="字典标签">
        <el-input v-model="selectSysDictData.dictLabel" placeholder="请输入字典名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="selectSysDictData.status" placeholder="数据状态" clearable>
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-top: 20px">
      <el-button @click="openAddSysDictDataDialogForm">添加</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <el-table
        ref="multipleTable"
        :data="sysDictDataPage"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="字典编码"
          width="120">
        <template slot-scope="scope">{{ scope.row.dictCode }}</template>
      </el-table-column>
      <el-table-column
          prop="dictLabel"
          label="字典标签"
          width="120">
        <template slot-scope="scope">{{ scope.row.dictLabel }}</template>
      </el-table-column>
      <el-table-column
          prop="dictValue"
          label="字典键值"
          width="120">
        <template slot-scope="scope">{{ scope.row.dictValue }}</template>
      </el-table-column>
      <el-table-column
          prop="dictSort"
          label="字典排序"
          width="120">
        <template slot-scope="scope">{{ scope.row.dictSort }}</template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="120">
        <template slot-scope="scope">{{ scope.row.status }}</template>
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="200">
        <template slot-scope="scope">{{ scope.row.remark }}</template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200px">
        <template slot-scope="scope">
         <span style="margin-right: 15px">
           <i class="el-icon-edit"></i>
           <el-button @click="openUpdateSysDictDataDialogForm(scope.row)" type="text" size="small">修改</el-button>
         </span>
          <span style="margin-right: 15px">
          <i class="el-icon-delete"></i>
          <el-button @click="deleteSysDictData(scope.row)" type="text" size="small">删除</el-button>
             </span>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!-- 添加对话框 -->

    <el-dialog title="添加字典数据" :visible.sync="addSysDictDataDialogFormVisible" width="600px">
      <el-form :model="sysDictData">
        <el-form-item label="字典类型" :label-width="formLabelWidth">
          <el-input v-model="sysDictData.dictType" autocomplete="off" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="数据标签" :label-width="formLabelWidth">
          <el-input v-model="sysDictData.dictLabel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据键值" :label-width="formLabelWidth">
          <el-input v-model="sysDictData.dictValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" :label-width="formLabelWidth">
          <el-input v-model="sysDictData.dictSort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="sysDictData.status" label=0>正常</el-radio>
          <el-radio v-model="sysDictData.status" label=1>停用</el-radio>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="sysDictData.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSysDictDataDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSysDictData">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 修改对话框 -->
    <el-dialog title="添加字典数据" :visible.sync="updateSysDictDataDialogFormVisible" width="600px">
      <el-form :model="sysDictData">
        <el-form-item label="字典类型" :label-width="formLabelWidth">
          <el-input v-model="sysDictData.dictType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据标签" :label-width="formLabelWidth">
          <el-input v-model="sysDictData.dictLabel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据键值" :label-width="formLabelWidth">
          <el-input v-model="sysDictData.dictValue" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" :label-width="formLabelWidth">
          <el-input v-model="sysDictData.dictSort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="sysDictData.status" label=0>正常</el-radio>
          <el-radio v-model="sysDictData.status" label=1>停用</el-radio>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="sysDictData.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateSysDictDataDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSysDictData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sysDictTypeList:null,
      //添加对话框是否打开属性
      addSysDictDataDialogFormVisible: false,
      // 表单中的标签宽度
      formLabelWidth: '100px',
      // 修改对话框的是否打开属性
      updateSysDictDataDialogFormVisible: false,
      //单个登录日志对象
      sysDictData: {
        //字典编码
        dictCode: '',
        //字典排序
        dictOrder: '',
        //字典标签
        dictLabel: '',
        // 字典键值
        dictValue: '',
        // 字典类型
        dictType: '',
        //样式属性
        cssClass: '',
        // 表格回显样式
        listClass: '',
        // 是否默认
        isDefault: '',
        // 状态 0-正常 1-停用
        status: '',
        //   创建者
        createBy: '',
        //   创建时间
        createTime: '',
        //   更新者
        updateBy: '',
        //   更新时间
        updateTime: '',
        //   备注
        remark: ""
      },
      // 当前第几页
      current: 1,
      //一页有几行
      size: 5,
      //一共有几条数据
      total: 0,
      //模糊查询条件变量
      selectSysDictData: {
        //字典编码
        dictCode: '',
        //字典排序
        dictSort: '',
        //字典标签
        dictLabel: '',
        // 字典键值
        dictValue: '',
        // 字典类型
        dictType: 'sys_user_sex',
        //样式属性
        cssClass: '',
        // 表格回显样式
        listClass: '',
        // 是否默认
        isDefault: '',
        // 状态 0-正常 1-停用
        status: '',
        //   创建者
        createBy: '',
        //   创建时间
        createTime: '',
        //   更新者
        updateBy: '',
        //   更新时间
        updateTime: '',
        //   备注
        remark: ""
      },
      //分页数据
      sysDictDataPage: null,
      //表格复选框标签
      multipleSelection: [],
      //当前字典类型
      currentDictType:''
    }
  },

  methods: {

    handleSizeChange(val) {
      this.size = val
      this.loadSysDictDataPage()
    },
    handleCurrentChange(val) {
      this.current = val
      this.loadSysDictDataPage()
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    loadSysDictDataPage() {
      this.axios.get("/sysDictData/Page?current=" + this.current
          + "&size=" + this.size
          + "&dictType=" + this.selectSysDictData.dictType
          + "&dictLabel=" + this.selectSysDictData.dictLabel
          + "&status=" + this.selectSysDictData.status
      )
          .then(result => {
            this.sysDictDataPage = result.data.data.records
            this.total = result.data.data.total
          })

    },
    // 模糊查询搜索按钮
    onSubmit() {
      this.current = 1
      this.loadSysDictDataPage()
      this.currentDictType=this.selectSysDictData.dictType
    },
    //删除字典类型--逻辑删除
    deleteSysDictData(row) {
      this.axios.delete("/sysDictData/" + row.dictCode)
          .then(result => {
            this.loadSysDictDataPage()
          })
    },
    // 打开修改对话框
    openUpdateSysDictDataDialogForm(row) {
      this.sysDictData = JSON.parse(JSON.stringify(row))
      this.updateSysDictDataDialogFormVisible = true
    },
    // 修改系统字典数据
    updateSysDictData() {
      this.axios.put("/sysDictData", this.sysDictData)
          .then(result => {
            this.updateSysDictDataDialogFormVisible = false
            this.loadSysDictDataPage()
          })
    },
    // 添加系统字典数据
    addSysDictData() {
      this.axios.post("/sysDictData", this.sysDictData)
          .then(result => {
            this.addSysDictDataDialogFormVisible = false
            this.loadSysDictDataPage()
          })
    },
    // 打开添加系统字典类型对话框
    openAddSysDictDataDialogForm() {
      this.empty()
      this.sysDictData.dictType=this.currentDictType
      this.addSysDictDataDialogFormVisible = true
    },
    //清空单个对象
    empty() {
      this.sysDictData = {
        //字典编码
        dictCode: '',
        //字典排序
        dictOrder: '',
        //字典标签
        dictLabel: '',
        // 字典键值
        dictValue: '',
        // 字典类型
        dictType: '',
        //样式属性
        cssClass: '',
        // 表格回显样式
        listClass: '',
        // 是否默认
        isDefault: '',
        // 状态 0-正常 1-停用
        status: '',
        //   创建者
        createBy: '',
        //   创建时间
        createTime: '',
        //   更新者
        updateBy: '',
        //   更新时间
        updateTime: '',
        //   备注
        remark: ""
      }
    },
    loadSysDictTypeList(){
      this.axios.get("/sysDictType/List")
          .then(result=>{
            this.sysDictTypeList=result.data.data
          })
    },

  },

  mounted() {
    this.selectSysDictData.dictType= this.$route.query.dictType
    this.currentDictType=this.selectSysDictData.dictType
    console.log(this.selectSysDictData.dictType)
    this.loadSysDictDataPage()
    this.loadSysDictTypeList()

  }
}
</script>